new Vue({
  el: '#z_game',
  data: {
    gameList: [],
    topList: [],
    language:['PC','PS4','安卓','苹果']
  },
  methods: {
    readFile() {
      this.$http.get('/moongoDB/games').then(response => {
        let res = response.body;
        
        let gameList = [];
        if (res) {
          // 排行
          this.topList = res.sort(valueSortBy("score", "title")).reverse().slice(0, 10);
          // 遍历
          this.language.map(arr => {
            gameList.push(res.filter(item => item.roof.indexOf(arr) != -1).slice(0,16));
          });
          this.gameList = gameList;

        }
      }, response => {
        console.log('请求数据失败！');
      });
    },

    

    toMusiccInfo(id) {
      window.open(`/gameInfo?_id=${id}`, '_blank')
    },
    toMusicClick(){
      window.open(`/game`, '_blank')
    }
  },

  created() {
    $('#z_game  .animeUl').html(`
  <li v-for="item in gameList" >
    <a v-for="arr in item" :href="'/gameInfo?_id=' + arr._id" target="_blank" >
      <img :src="arr.imgUrl" alt="">
        <span>
        <div class="title" :title="arr.name">{{arr.name}}</div>
        <div class="singer" :title="arr.gameType">{{arr.gameType}}</div>
        </span>
        <span class="time" :title="arr.score">{{arr.score}}</span>

    </a>
  </li>`);

    $('#z_game .topUl').html(`
  <li v-for="(item, index) in topList" :key="index" @click="toMusiccInfo(item._id)">
    <span class="topUl_no">{{ index + 1 }}</span>
    <span class="topUl_title" :title="item.name">{{ item.name }}</span>
    <span class="topUl_hua">{{ item.score }}</span>
  </li>`);
    this.readFile();
  },
  mounted() {

  },
  updated() {
    /*更新页面的按钮*/
    let $dateLi = $("#z_game .dateUl li");
    let $anime_W = $("#z_game .animeUl li").width();

    $dateLi.each(function (index, ele) {
      let $that = $(this);
      let $index = index;

      $that.click(function () {
        let $animeUl = $("#z_game .animeUl");
        let $move = $index * $anime_W;

        setTimeout(() => {
          $animeUl.stop().animate({
            left: -$move
          }, 500, 'swing');
        }, 100);

        $that.siblings().removeClass("active");
        $that.addClass("active");
      });
    });
    $dateLi.eq(0).click();
  }
});